<template>
    <div id="tmpl">
        <!--1.0实现新闻详情-->
        <div class="title">
            <h4 v-text="info.title"></h4>
            <p>{{info.add_time | datefmt('YYYY-MM-DD')}} {{info.click}}次浏览</p>
        </div>
        <div id="content" v-html="info.content"></div>

        <!--2.0实现评论组件的集成-->
        <!--10.2实现评论组件-->
        <comment :id="id"></comment>
    </div>
</template>

<script>
import common from '../../kits/common.js';
//10.0导入评论组件 commen.vue
import comment from '../subcom/comment.vue';
export default {
    components:{
        comment //10.1注册评论组件
    },
    data() {
        return {
            id: 0,
            info: {
                /*"id": 13,
                "title": "1季度多家房企利润跌幅超50% 去库存促销战打响",
                "click": 1,
                "add_time": "2015-04-16T03:50:28.000Z",
                "content":"fadf"*/
                }
        }
    },
    created() {
        //1.0获取url传入的id参数值赋值给data中的id属性
        this.id = this.$route.params.id;

        //2.0请求服务器获取到这个id对应的详情数据对象
        this.getinfo();
    },
    methods:{
        getinfo(){
            //1.0定义url
            var url = common.apidomain + '/api/getnew/'+this.id;
            //2.0发出ajax请求获取数据
            this.$http.get(url).then(function(res){
                var body = res.body;
                if(body.status !=0){
                    alert(body.message);
                    return;
                }
                //3.0赋值
                this.info = body.message[0];
            })
        }
    }
}
</script>

<style scoped>

.title h4 {
    color: #0094ff;
}

.title p {
    color: rgba(0, 0, 0.5);
}

.title,
#content {
    padding: 5px;
}

#tmpl img{
    width: 100%!important;
}
</style>

